<template>
  <view class="p-[40rpx] box-border text-center">
    <view class="mb-[30rpx] flex flex-center">
      <image src="@/assets/img/xyi.svg" mode="widthFix" class="w-[120rpx] h-[120rpx]" />
    </view>
    <text class="text-[48rpx] mb-[30rpx] block text-[#4caf50] font-bold">签署电子协议</text>
    <text class="text-[32rpx] text-[#666] leading-[1.6] mb-[60rpx] block">
      根据国家卫生健康委员会要求，申请电子健康卡需要签署《电子健康卡使用协议》，请仔细阅读协议内容后签署。
    </text>

    <view class="bg-[#f8f9fa] rounded-[24rpx] p-[50rpx] text-center mb-[40rpx] border border-[#e9ecef]">
      <text>合同名称：{{ contractName }}</text>
    </view>


    <nut-button type="primary" size="large"
      class="h-[88rpx] text-[36rpx] bg-gradient-to-r from-[#4caf50] to-[#2e7d32]" @click="onSign">
      <template #icon>
        <IconFont name="edit" class="mr-[10rpx]" />
      </template>
      <text>去签署</text>
    </nut-button>
  </view>
</template>

<script setup lang="ts">
import { IconFont } from '@nutui/icons-vue-taro'
const props = defineProps<{
  contractName: string
}>()
// const props = defineProps<{
//   signStatusIcon: string
//   signStatusIconClass: string
//   signStatusText: string
//   signStatusDesc: string
//   signActionIcon: string
// }>()
const emit = defineEmits(['sign'])
function onSign() {
  emit('sign')
}
</script> 